import React, { PureComponent } from 'react';
import { Button, Col, Form, Input, Row } from 'antd';
import Grid from '../../../components/Sword/Grid';
import Panel from '../../../components/Panel';
import { list } from '../../../services/demo';

const FormItem = Form.Item;
@Form.create()
class Demo extends PureComponent {
  state = {
    data: {},
  }

  componentWillMount() {
    list().then(response => {
      this.setState({
        data: {
          list: response.data.records,
          pagination: {
            total: response.data.total,
            current: response.data.current,
            pageSize: response.data.size,
          },
        }
      });
    });
  }

  handleSearch = params => { 
    list(params).then(response => {
      this.setState({
        data: {
          list: response.data.records,
          pagination: {
            total: response.data.total,
            current: response.data.current,
            pageSize: response.data.size,
          },
        },
      });
    });
  };

  // ============ 查询表单 =============== 
  renderSearchForm = onReset => {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
        <Col md={6} sm={24}>
          <FormItem label="标题">
            {
              getFieldDecorator('title')(
                <Input placeholder="请输入标题" />
              )}
          </FormItem>
        </Col>
        <Col>
          <div style={{ float: 'right' }}>
            <Button type="primary" htmlType="submit"> 查询 </Button>
            <Button style={{ marginLeft: 8 }} onClick={onReset}> 重置 </Button>
          </div>
        </Col>
      </Row>
    );
  };

  render() {
    const code = 'demo';
    // const response = {
    //   code: 200,
    //   data: {
    //     total: 3,
    //     size: 10,
    //     current: 1,
    //     searchCount: true,
    //     pages: 1,
    //     records: [
    //       {
    //         id: '1',
    //         title: '测试标题1',
    //         content: '测试内容1',
    //         date: '2018-05-08 12:00:00',
    //       },
    //       {
    //         id: '2',
    //         title: '测试标题2',
    //         content: '测试内容2',
    //         date: '2018-06-08 12:00:00',
    //       },
    //       {
    //         id: '3',
    //         title: '测试标题3',
    //         content: '测试内容3',
    //         date: '2018-07-08 12:00:00',
    //       },
    //     ],
    //   },
    //   message: 'success',
    //   success: true,
    // };

    const { data } = this.state;
    // const data = {
    //   list: ds.records,
    //   pagination: {
    //     total: ds.total,
    //     current: ds.current,
    //     pageSize: ds.size,
    //   },
    // };

    const { form, loading } = this.props;
    const columns = [
      {
        title: '标题',
        dataIndex: 'title',
      },
      {
        title: '内容',
        dataIndex: 'content',
      },
      {
        title: '时间',
        dataIndex: 'date',
      },
    ];
    return (
      <Panel>
        <Grid
          code={code}
          form={form}
          onSearch={this.handleSearch}
          renderSearchForm={this.renderSearchForm}
          loading={loading}
          data={data}
          columns={columns}
        />
      </Panel>
    );
  }
} export default Demo;